<style lang="less">
    @import "./roleManage.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
            <Card>
                <!--<Row class="operation">
                    <Button @click="addRole" type="primary" icon="md-add">添加角色</Button>
                    <Button @click="delAll" icon="md-trash">批量删除</Button>
                    <Button @click="init" icon="md-refresh">刷新</Button>
                </Row>
                <Row>
                    <Alert show-icon>
                        已选择 <span class="select-count">{{selectCount}}</span> 项
                        <a class="select-clear" @click="clearSelectAll">清空</a>
                    </Alert>
                </Row>-->
                <Row>
                    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
                </Row>
                <Row type="flex" justify="end" class="page">
                    <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                </Row>
            </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable='false' :width="500">
            <Form ref="roleForm" :model="role" :label-width="80" :rules="roleFormValidate">
                <FormItem label="角色名称" prop="roleName">
                    <Input v-model="role.roleName"/>
                </FormItem>
                <FormItem label="角色编码" prop="roleCode">
                    <Input v-model="role.roleCode" placeholder="填写英文编码"/>
                </FormItem>
                <FormItem label="备注" prop="roleDesc">
                    <Input v-model="role.roleDesc"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelRole">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitRole">提交</Button>
            </div>
        </Modal>

    </div>
</template>

<script>
    import {addRole, deleteRole, editRole, getRoleList, setDefaultRole} from "@/api/index";
    import seAuthority from "../role-manage/setAuthority";
    export default {
        name: "role-manage",
        components: {
            seAuthority
        },
        data() {
            return {
                loading: true,
                sortColumn: "createTime",
                sortType: "desc",
                modalType: 0,
                roleModalVisible: false,
                modalTitle: "",
                role: {
                    roleDesc: "",
                    roleName:""
                },
                roleFormValidate: {
                    roleName: [{required: true, message: "角色名称不能为空", trigger: "blur"}]
                },
                submitLoading: false,
                selectList: [],
                selectCount: 0,
                data: [],
                pageNumber: 1,
                pageSize: 10,
                total: 0,
                columns: [
                    {
                        type: "selection",
                        width: 60,
                        align: "center"
                    },
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "角色名称",
                        key: "roleName",
                        sortable: true
                    },
                    {
                        title: "角色编码",
                        key: "roleCode",
                        sortable: true
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        sortable: true,
                        sortType: "desc"
                    },
                    {
                        title: "更新时间",
                        key: "updateTime",
                        sortable: true
                    },
                   /* {
                        title: "注册默认角色",
                        key: "defaultRole",
                        align: "center",
                        render: (h, params) => {
                            if (params.row.defaultRole==1) {
                                return h("div", [
                                    h(
                                        "Button",
                                        {
                                            props: {
                                                type: "success",
                                                size: "small"
                                            },
                                            style: {
                                                marginRight: "5px"
                                            },
                                            on: {
                                                click: () => {
                                                    this.cancelDefault(params.row);
                                                }
                                            }
                                        },
                                        "取消默认"
                                    )
                                ]);
                            } else {
                                return h("div", [
                                    h(
                                        "Button",
                                        {
                                            props: {
                                                type: "info",
                                                size: "small"
                                            },
                                            style: {
                                                marginRight: "5px"
                                            },
                                            on: {
                                                click: () => {
                                                    this.setDefault(params.row);
                                                }
                                            }
                                        },
                                        "设为默认"
                                    )
                                ]);
                            }
                        }
                    },*/
                    {
                        title: "备注",
                        key: "roleDesc"
                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        width: 300,
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    seAuthority,
                                    {
                                        props: {
                                            role: params.row
                                        },
                                    }
                                ),
                                /*h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.edit(params.row);
                                            }
                                        }
                                    },
                                    "编辑"
                                ),*/
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        style: {
                                            marginLeft: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row);
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ]
            };
        },
        methods: {
            init() {
                this.getRoleList();
                // 获取所有菜单权限树
                //this.getPermList();
            },
            changePage(v) {
                this.pageNumber = v;
                this.getRoleList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.pageSize = v;
                this.getRoleList();
            },
            changeSort(e) {
                this.sortColumn = e.key;
                this.sortType = e.order;
                if (e.order === "normal") {
                    this.sortType = "";
                }
                this.getRoleList();
            },
            getRoleList() {
                this.loading = true;
                let params = {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    sort: this.sortColumn,
                    order: this.sort
                };
                getRoleList(params).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.data = res.data.rows;
                        this.total = res.data.total;
                    }
                });
            },
            cancelRole() {
                this.roleModalVisible = false;
            },
            submitRole() {
                this.$refs.roleForm.validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            // 添加
                            this.submitLoading = true;
                            addRole(this.role).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.getRoleList();
                                    this.roleModalVisible = false;
                                }
                            });
                        } else {
                            this.submitLoading = true;
                            editRole(this.role).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.getRoleList();
                                    this.roleModalVisible = false;
                                }
                            });
                        }
                    }
                });
            },
            addRole() {
                this.modalType = 0;
                this.modalTitle = "添加角色";
                this.$refs.roleForm.resetFields();
                delete this.role.id;
                this.roleModalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑角色";
                // 转换null为""
                for (let attr in v) {
                    if (v[attr] === null) {
                        v[attr] = "";
                    }
                }
                let str = JSON.stringify(v);
                this.role = JSON.parse(str);;
                this.roleModalVisible = true;
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除角色 " + v.roleName + " ?",
                    onOk: () => {
                        deleteRole({
                            roleIds:v.id
                        }).then(res => {
                            if (res.status === true) {
                                this.$Message.success("删除成功");
                                this.getRoleList();
                            }
                        });
                    }
                });
            },
            setDefault(v) {
                this.$Modal.confirm({
                    title: "确认设置",
                    content: "您确认要设置所选的 " + v.roleName + " 为注册默认角色?",
                    onOk: () => {
                        let params = {
                            id: v.id,
                            defaultRole: 1
                        };
                        setDefaultRole(params).then(res => {
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.getRoleList();
                            }
                        });
                    }
                });
            },
            cancelDefault(v) {
                this.$Modal.confirm({
                    title: "确认取消",
                    content: "您确认要取消所选的 " + v.roleName + " 角色为默认?",
                    onOk: () => {
                        let params = {
                            id: v.id,
                            defaultRole: 0
                        };
                        setDefaultRole(params).then(res => {
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.getRoleList();
                            }
                        });
                    }
                });
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            delAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要删除的数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = [];
                        this.selectList.forEach(function (e) {
                            ids.push(e.id);
                        });
                        deleteRole({
                            roleIds:ids
                        }).then(res => {
                            if (res.status === true) {
                                this.$Message.success("删除成功");
                                this.clearSelectAll();
                                this.getRoleList();
                            }
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>